<template>
  <div class="login-container">
<!--    <div class="index-header">-->
<!--&lt;!&ndash;      <div class="index-header-top">&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="index-header-top-logo">&ndash;&gt;-->
<!--&lt;!&ndash;          <img src="../../assets/logo.png" alt="电子四院">&ndash;&gt;-->
<!--&lt;!&ndash;          <h1>电子四院集成电路产业专利数据库</h1>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="flex_row_justifycenter">&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="top-div">&ndash;&gt;-->
<!--&lt;!&ndash;          <p class="name">集成电路产业专利数据库</p>&ndash;&gt;-->
<!--&lt;!&ndash;          <p class="y-name">PATENTS DATABASE</p>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="search">&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="flew_row">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-form :inline="true" :model="searchObj" class="demo-form-inline">&ndash;&gt;-->
<!--&lt;!&ndash;                <el-input placeholder="请输入内容" style="width: 600px;margin-left: 10px" v-model="searchObj.keyword">&ndash;&gt;-->
<!--&lt;!&ndash;                  <el-button @click="searchClickTop" slot="append" icon="el-icon-search"></el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-input>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-form>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button class="search-button" @click="scrollToCmtList">导航</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="radiogroup">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-radio style="font-weight: bold;font-size: 18px" v-model="activeName" label="first">中国</el-radio>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-radio style="font-weight: bold;font-size: 18px" v-model="activeName" label="second">世界</el-radio>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </div>-->
    <div class="index-main">
      <div>
        <div class="main-asside">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="中国专利库" name="first">
              <el-tree :data="cnPatentType" :props="defaultProps" @node-click="handleCnNodeClick"></el-tree>
            </el-tab-pane>
            <el-tab-pane label="世界专利库" name="second">
              <el-tree :data="enPatentType" :props="defaultProps" @node-click="handleEnNodeClick"></el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="main-table">
          <div class="main-table-title">
            <el-form :inline="true" :model="searchObj" class="demo-form-inline">
              <el-input placeholder="请输入内容" style="width: 600px;margin-left: 10px" v-model="searchObj.keyword">
                <el-button @click="searchClick" slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <span class="main-table-tip">为您找到相关结果 {{ this.total }} 个</span>
            </el-form>
          </div>
          <el-table
            :data="tableData"
            height="600px"
            border
            style="width: 100%">
            <el-table-column
              prop="title"
              label="专利名称"
              sortable
              width="200">
            </el-table-column>
            <el-table-column
              prop="appno"
              label="申请号"
              sortable
              width="140">
            </el-table-column>
            <el-table-column
              prop="pud"
              width="120"
              sortable
              label="公开/公告日">
            </el-table-column>
            <!--            <el-table-column-->
            <!--              prop="type"-->
            <!--              width="100"-->
            <!--              label="主分类">-->
            <!--            </el-table-column>-->
            <el-table-column
              prop="inventor"
              width="140"
              sortable
              label="发明人">
            </el-table-column>
            <el-table-column
              prop="digest"
              width="379"
              label="摘要">
            </el-table-column>
            <el-table-column
              prop="apd"
              sortable
              width="120"
              label="申请日">
            </el-table-column>
            <el-table-column
              prop="appl"
              sortable
              width="210"
              label="第一申请人">
            </el-table-column>
            <el-table-column
              prop="pubnr"
              sortable
              width="140"
              label="公开/公告号">
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination
            background
            :current-page="page"
            :page-size="limit"
            style="padding: 30px 0; text-align: center;"
            layout="prev, pager, next"
            :total="total"
            @current-change="fetchMyData">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getPageList, getPageList2, getType } from '@/api/home'

export default {
  data() {
    return {
      cnPatentType: [],
      enPatentType: [],
      defaultProps: {
        children: 'children',
        label: 'type'
      },
      activeName: 'first',
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 5, // 每页记录数,
      searchObj: {
        keyword: '',
        type: ''
      },
      tableData: []
    }
  },
  created() {
    this.fetchData()
    this.fetchTypeData()
  },
  methods: {
    handleCnNodeClick(data) {
      console.log(data.type)
      this.searchObj.type = data.type
      this.fetchData()
    },
    handleEnNodeClick(data) {
      console.log(data.type)
      this.searchObj.type = data.type
      this.fetchData()
    },
    searchClickTop: function() {
      this.scrollToCmtList()
      this.searchClick()
    },

    searchClick() {
      if (this.searchObj.keyword !== '') {
        this.fetchData()
      }
    },
    handleClick(tab, event) {
      this.searchObj = {
        keyword: '',
        type: ''
      }
      this.page = 1
      this.fetchData()
    },
    fetchMyData(page) {
      this.page = page
      this.fetchData()
    },
    fetchData() {
      // this.page = page
      // this.activeName = activeName
      this.listLoading = true
      if (this.activeName === 'first') {
        getPageList(this.page, '7', this.searchObj).then(response => {
          this.tableData = response.data.records
          this.total = parseInt(response.data.total)
          this.listLoading = false
        })
      } else {
        getPageList2(this.page, '7', this.searchObj).then(response => {
          this.tableData = response.data.records
          this.total = parseInt(response.data.total)
          this.listLoading = false
        })
      }

    },
    fetchTypeData() {
      getType().then(response => {
        this.cnPatentType = response.data.cn
        this.enPatentType = response.data.en
      })
    },
    // 滚动条
    scrollToCmtList() {
      // 1.1 返回文档在垂直方向已滚动的像素值
      const now = window.scrollY
      // 1.2 目标位置（文章信息区域的高度）
      let dist = document.querySelector('.index-main').offsetHeight
      // 1.3 可滚动高度 = 整个文档的高度 - 浏览器窗口的视口（viewport）高度
      const avalibleHeight = document.documentElement.scrollHeight - window.innerHeight
      //document.documentElement.scrollHeight - window.innerHeight

      // 2.1 如果【目标高度】 大于 【可滚动的高度】
      if (dist > avalibleHeight) {
        // 2.2 就把目标高度，设置为可滚动的高度
        dist = avalibleHeight
      }

      // 3. 动态计算出步长值
      const step = (dist - now) / 15

      setTimeout(() => {
        // 4.2 如果当前的滚动的距离不大于 1px，则直接滚动到目标位置，并退出递归
        if (Math.abs(step) <= 1) {
          return window.scrollTo(0, dist)
        }
        // 4.1 每隔 10ms 执行一次滚动，并递归地进行下一次的滚动
        window.scrollTo(0, now + step)
        this.scrollToCmtList()
      }, 1)
    }
  }
}
</script>
<style scoped>
/deep/ span.el-radio__label {
  font-size: 20px;
  color: #ffffff;
}
</style>
<style lang="scss" scoped>


.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #F8F8Fa;
  overflow: hidden;

  .index-header {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    color: #fff;
    background: url(../../assets/home_top.jpg) no-repeat 50%;
  }

  .index-header-top {
    width: 100%;
    height: 100px;
    background-color: hsla(0, 1%, 6%, .4);
    padding: 0 100px;
    box-sizing: border-box;
    display: flex;
  }

  .index-header-top-logo {
    display: flex;
    align-items: center;

    img {
    }

    h1 {
      margin-left: 10px;
      border-bottom: 2px solid rgb(106, 109, 111);
      line-height: 34px;
    }
  }

  .flex_row_justifycenter {
    color: #fff;
    padding: 0 8%;
    box-sizing: border-box;
    padding-top: 240px;
    text-align: left;
    display: flex;
    justify-content: center;

    .top-div {
      width: 660px;
      text-align: center;

      .search {
        height: 40px;

        .flew_row {
          display: flex;

          .search-button {
            margin-left: 10px;
          }
        }

        .radiogroup {
          padding: 10px 0 10px 13px;
          text-align: left;
          background-color: rgba(3, 3, 3, .4);
          border-radius: 8px;
          margin-left: 8px;
          width: 681px;
          font-weight: 100;
        }
      }
    }

    .name {
      font-size: 50px;
      font-weight: 900;
      margin: 0;
    }

    .y-name {
      margin: 0;
      font-size: 30px;
      font-weight: 900;
      line-height: 60px;
    }
  }


  .index-main {
    width: 100%;
    height: 100vh;
    margin: 20px 30px;
    box-sizing: border-box;

    .main-asside {
      display: inline;
      float: left;
      overflow-y: scroll;
      height: 700px;
      background-color: #ffffff;
    }

    .main-table {
      display: inline;
      float: left;
      width: 80%;
      height: 1300px;
      margin-left: 10px;
    }

    .main-table-title {
      background-color: #ffffff;
      margin-bottom: 20px;
      line-height: 38px;
      width: 1100px;
      height: 50px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
    }

    .main-table-tip {
      float: right;
      margin-left: 200px;
    }
  }

}
</style>
